<!--  -->
<template>
<div class=''>
  <div class="pagination-container">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pagesize"
      layout="prev, pager, next, sizes, jumper"
      :total="counts"
    >
    </el-pagination>
  </div>
</div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
// import引入的组件需要注入到对象中才能使用
  name: 'PaginationAdd',
  // 组件传值
  props: {
    page: {
      type: Number,
      required: true,
    },
    pagesize: {
      type: Number,
      required: true,
    },
    counts: {
      type: Number,
      required: true,
    },
  },
  // 组件名
  components: {},
  data  () {
    // 这里存放数据
    return {

    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 一页多少条
    handleSizeChange (newSize) {
      this.$emit('handleSizeChange', newSize)
    },

    // 多少页
    handleCurrentChange (newPage) {
      this.$emit('handleCurrentChange', newPage)
    },
  },
  // 生命周期 - 创建之前
  beforeCreate  () {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created  () {

  },
  // 生命周期 - 挂载之前
  beforeMount  () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted  () {

  },
  // 生命周期 - 更新之前
  beforeUpdate  () {},
  // 生命周期 - 更新之后
  updated  () {},
  // 生命周期 - 销毁之前
  beforeDestroy  () {},
  // 生命周期 - 销毁完成
  destroyed  () {},
  // 如果页面有keep-alive缓存功能,这个函数会触发
  activated  () {},
  // keep-alive专属,组件被销毁时调用
  deactivated () {},
  // 局部注册,自定义指令
  directives: {},
}
</script>
<style lang='less' scoped>
// @import url(); 引入公共css类
.el-pagination {
  float: right;
  margin: 20px;
}
.pagination-container {
  margin: 0;
}
</style>
